<template>
   <div class="talion-view">
       <div class="header-bar">
           <span class="close-talion" @click="closeTalion">关闭</span>
           <!-- 防止表单提交 -->
           <form class="search" onsubmit="return false"> 
                <!-- 输入首尾空格过滤  .lazy取代 input 监听 change 事件  用户回车进行搜索  -->
               <input type="search" name="query" v-model.trim.lazy="queryStr" @keyup.enter="goSearch()">
           </form>
       </div>
       <ul class="has-header">
           <li>
               <div>
                   <a href="#" target="_blank">
                       <strong style="color: rgb(244,143,46);">电影</strong>
                       <span>影院热映</span>
                   </a>
                    <a href="#" target="_blank">
                       <strong style="color: rgb(230,70,126);">同城</strong>
                       <span>周末活动</span>
                   </a>
                    <a href="#" target="_blank">
                       <strong style="color: rgb(159,120,96);">阅读</strong>
                       <span>电子书</span>
                   </a>
                    <a href="#" target="_blank">
                       <strong style="color: rgb(225,100,77);">东西</strong>
                       <span>心爱之物</span>
                   </a>
               </div>
           </li>
           <li>
               <div>
                   <a href="#" target="_blank">
                        <strong style="color: rgb(122, 106, 219);">电视</strong>
                        <span>正在热播</span>
                    </a>
                    <a href="#" target="_blank">
                        <strong style="color: rgb(42, 184, 204);">小组</strong>
                        <span>志趣相投</span>
                    </a>
                    <a href="#" target="_blank">
                        <strong style="color: rgb(87, 116, 197);">游戏</strong>
                        <span>虚拟世界</span>
                    </a>
                    <a href="#" target="_blank">
                        <strong style="color: rgb(64, 207, 169);">FM</strong>
                        <span>红心歌单</span>
                    </a>
               </div>
           </li>
           <li>
               <div>
                   <a href="#" target="_blank">
                        <strong style="color: rgb(159, 120, 96);">图书</strong>
                        <span>畅销排行</span>
                    </a>
                    <a href="#" target="_blank">
                        <strong style="color: rgb(244, 143, 46);">音乐</strong>
                        <span>新碟榜</span>
                    </a>
                    <a href="#" target="_blank">
                        <strong style="color: rgb(89, 108, 221);">应用</strong>
                        <span>玩手机</span>
                    </a>
                    <a href="#" target="_blank">
                        <strong style="color: rgb(66, 189, 86);">市集</strong>
                        <span>购买原创</span>
                    </a>
               </div>
           </li>
       </ul>
       <sub-nav mold="navBottom"></sub-nav>
   </div>
</template>

<script>
    import SubNav from '../component/SubNav.vue';

   export default {
       name: 'talion-view',
       components: { SubNav },
       data () {
       return {
           queryStr: ''
       }
   },
   methods: {
       // 传值 PageView 执行 closeTalion
       closeTalion: function(){
           this.$emit('closeTalion')
       },
       goSearch: function(){
           // 子组件可以使用 $emit 触发父组件的自定义事件。
           this.$emit('closeTalion')
           // 跳转到搜索
           this.$router.push({
               name: 'SearchView',
               params: {
                   q: this.queryStr
               }
           })
       }
   }
 }
</script>

<style lang="scss" scoped>
    .talion-view{
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #FFF;
        z-index: 999;
    }
    .close-talion {
        color: #42BD56;
        font-size: 1.6rem;
    }
    .search {
        // 让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容
        flex: 1;
        width: 100%;
        padding-left: 1rem;
    }
    input[type=search]{
        border: 0;
        box-sizing: border-box;
        background: url() no-repeat 50% #f3f3f3;
        font-size: 1.4rem;
        height: 3.2rem;
        width: 100%;
        border-radius: 0.3rem;
        background-size: 1.73rem;
    }
    input[type=search]:focus {
        // 选择获得焦点的输入字段，并设置其样式：
        background: #F3F3F3;
    }
    ul {
        display: flex;
        justify-content: space-around;
        padding-top: 2.5rem;
    
    li {
        width: 33.33%;
    }
    div{
        position: relative;
        float:left;
        left: 50%;
        top: 0;
    }
    a {
        position: relative;
        left: -50%;
        top: 0;
        display: block;
        text-align: center;
        margin-bottom: 2.5rem;
    }
    strong{
        display: block;
        font-weight: 400;
        font-size: 2.4rem;
        line-height: 2.8rem;
    }
    span{
        color: #999;
        height: 1.7rem;
        font-size: 1.2rem;
        letter-spacing: 0.1rem;
        display: block;
    }
}
</style>
